// components/turntable/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    awards: {
      type: Array,
      value: [{}, {}, {},{}, {}, {}],
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    size: 300,
  },

  lifetimes: {
    attached() {
      this.initCanvas();
    },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    initCanvas() {
      const { size, awards } = this.data;

      // 在自定义组件下，当前组件实例的 this，表示在这个自定义组件下查找拥有 canvas-id 的 canvas ，如果省略则不在任何自定义组件内查找
      const ctx = wx.createCanvasContext("canvas", this);
      const len = awards.length;
      const deg = 360 / len;
      const x = size / 2;
      const y = size / 2;
      const r = size / 2;
      // let start = 0;
      // let end = single;
      console.log(deg, 'deg');

      awards.forEach((v, k) => {
        console.log(k, 'k');
        ctx.save();

        ctx.translate(x, y);
        ctx.moveTo(0, 0);
        ctx.rotate(((deg * k - deg) * Math.PI) / 180);
        ctx.arc(0, 0, r, 0, (deg / 360) * 2 * Math.PI, false);
        // ctx.stroke();

        // 填充扇形
        if (k % 2 === 0) {
          ctx.setFillStyle("rgba(255, 255, 255, .1)");
        } else {
          ctx.setFillStyle("rgba(228, 55, 14, .1)");
        }
        ctx.fill();

        // 绘制边框
        // ctx.setLineWidth(0.5);
        // ctx.setStrokeStyle("rgba(228, 55, 14, .1)");
        // ctx.stroke();

        // 恢复前一个状态
        ctx.restore();

        // ctx.restore();
      });
      ctx.draw();
    },
  },
});
